<script setup lang="ts">
import { useRouter } from 'vue-router'
import { usePlayerStore } from '../../stores/player'
import { storeToRefs } from 'pinia'
import { Dialog } from 'vant';
import 'vant/es/dialog/style';
const router = useRouter()
const store = usePlayerStore()
const { collectMusic,collectMusicList } = storeToRefs(store)

// 跳转至喜欢的音乐详情页
const goToLikeMusicView = () => {
    if (collectMusic.value.length) {
        router.push({
            path: '/songDetails'
        })
    } else {
        Dialog.confirm({
            message: '还没有收藏的音乐，快去听听吧！',
        }).then(() => {
            router.push({
                path: '/'
            })
        }).catch(() => {
            // on cancel
        });
    }

}
const goToSongDetails = (id:number) => {
    router.push({
        path: '/songDetails',
        query: {
            id
        }
    })
}
</script>

<template >
    <div class="user-container">
        <div class="header">
            <div class="header-nav">
                <i class="icon-news"></i>
                <van-icon name="setting-o" size="20" />
            </div>
            <div class="header-content">
                <div class="user-info">
                    <img src="@/assets/imgs/ballad.jpg">
                    <div class="attention">
                        <p class="common">关注</p>
                        <p>36</p>
                    </div>
                    <div class="fans">
                        <p class="common">粉丝
                        <p>

                        </p>3</p>
                    </div>
                </div>
                <div class="name">
                    <p>燕十七</p>
                    <p>@87212400</p>
                </div>
                <p class="pub">行万里路，识天下事。</p>
            </div>
        </div>
        <div class="like-music">
            <p>收藏的音乐</p>
            <div class="music-item" @click="goToLikeMusicView">
                <img src="@/assets/imgs/like-bg2.webp">
                <div class="text">
                    <p>我喜欢的音乐</p>
                    <p class="num">{{ collectMusic.length }} 首</p>
                </div>
            </div>
        </div>
        <div class="collect-music">
            <p>收藏的歌单</p>
            <div class="music-item" v-for="item in collectMusicList" :key="item.id" @click="goToSongDetails(item.id)">
                <img :src="item.coverImgUrl">
                <div class="text">
                    <p class="van-ellipsis">{{item.title}}</p>
                    <p class="num">{{item.musicLength}}首</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
.user-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    margin-bottom: 50px;
    color: white;
    background-image: linear-gradient(to bottom right, #293d48, #000000);
    overflow: auto;

    .header {
        height: 200px;
        margin: 0 16px 50px;

        .header-nav {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 46px;

            .icon-news {
                display: inline-block;
                width: 20px;
                height: 20px;
                background-image: url('@/assets/imgs/news.png');
                background-size: cover;
                background-repeat: no-repeat;
            }

            .van-icon {
                margin-left: 30px;
                color: #ccc;
            }
        }

        .header-content {
            .user-info {
                display: flex;
                justify-content: space-between;
                align-items: center;

                img {
                    width: 80px;
                    height: 80px;
                    border-radius: 999px;
                }

                .attention {
                    // margin-right: 40px;

                    text-align: center;

                }

                .common {
                    margin-bottom: 10px;
                    font-size: 12px;
                    color: #888387;
                }

                .fans {
                    margin-right: 45px;
                    text-align: center;

                }
            }

            .name {
                margin: 20px 0;
                letter-spacing: 1px;
                font-size: 20px;

                p {
                    &:nth-of-type(2) {
                        margin-top: 10px;
                        font-size: 12px;
                        color: #888387;
                    }
                }
            }

            .pub {
                font-size: 12px;
                color: #ccc;
            }
        }
    }

    .like-music {
        margin: 0 16px ;
        letter-spacing: 1px;


    }

    .music-item {
        display: flex;
        align-items: center;
        margin: 16px 0;

        img {
            margin-right: 20px;
            width: 60px;
            height: 60px;
            border-radius: 5px;
        }

        .text {
            flex: 1;
            font-size: 14px;
            color: #ddd;
            p{
                width: 250px;
            }

            .num {
                margin-top: 10px;
                color: #888387;
            }

        }
    }

    .collect-music {
        margin: 0 16px 60px;
        letter-spacing: 1px;

    }
}
</style>